<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="生产时间">
        <el-date-picker v-model="dateRange" style="width: 340px" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker></el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="productList">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column label="序号" type="index" width="50" />
      <el-table-column label="产品编号" prop="productCode" :show-overflow-tooltip="true" width="auto" />
      <el-table-column label="人员" prop="operator" :show-overflow-tooltip="true" width="auto" />
      <el-table-column label="开始时间" prop="startTime" :show-overflow-tooltip="true" width="auto">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.startTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="结束时间" prop="endTime" :show-overflow-tooltip="true" width="auto">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.endTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="扭矩规定值" prop="specifiedTorque" :show-overflow-tooltip="true" width="auto" />
      <el-table-column label="扭矩值范围" prop="specifiedTorqueMax" :show-overflow-tooltip="true" width="auto" >
        <template slot-scope="scope">
          <span>{{scope.row.specifiedTorqueMin}}~{{scope.row.specifiedTorqueMax}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="扭矩最大值" prop="specifiedTorqueMax" :show-overflow-tooltip="true" width="auto" />
      <el-table-column label="扭矩最小值" prop="specifiedTorqueMin" :show-overflow-tooltip="true" width="auto" /> -->
      <el-table-column label="扭矩测量值" prop="measurTorque" :show-overflow-tooltip="true" width="auto" />
      <el-table-column label="压力1" prop="maximumWorkingMoment1" :show-overflow-tooltip="true" width="auto" />
      <el-table-column label="压力2" prop="maximumWorkingMoment2" :show-overflow-tooltip="true" width="auto" />
      <el-table-column label="合格状态" prop="isQualified" :show-overflow-tooltip="true" width="auto">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isQualified == true ? 'success' : 'danger'"> {{ scope.row.isQualified == true ?
            '合格':'不合格' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="处理原因" prop="handleRemark" :show-overflow-tooltip="true" width="auto" />

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" :disabled="scope.row.isQualified == true"
            @click="handleApply(scope.row)">处理</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 处理内容对话框 -->
    <el-dialog title="填写处理内容" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="处理内容" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入处理内容" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
  </div>
</template>

<script>
  import { ProductQuery, handleProduct, exportProcess } from "@/api/system/datamanage";
  import moment from 'moment'
  import { saveAs } from 'file-saver'
  import { Loading } from 'element-ui';

  export default {
    name: "Role",
    // dicts: ['alarm_type'],
    data() {
      return {
        // 遮罩层
        loading: true,
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 角色表格数据
        productList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 日期范围
        dateRange: ['', ''],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          roleName: undefined,
          roleKey: undefined,
          status: undefined
        },
        // 表单参数
        form: {},
        id: '',
        rules: {
          remark: [
            { required: true, message: "处理内容不能为空", trigger: "blur" }
          ],
        }
      };
    },
    created() {
      let startTime = moment().subtract(1, 'month').format('YYYY-MM-DD') + ' 00:00:00';
      let endTime = this.parseTime(new Date());
      this.dateRange = [startTime, endTime]
      this.getList();
    },
    methods: {
      /** 查询生产列表 */
      getList() {
        this.loading = true;
        ProductQuery(this.addDateTimeRange(this.queryParams, this.dateRange)).then(response => {
          this.productList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      handleApply(row) {
        this.open = true
        this.form.id = row.id
      },
      cancel() {
        this.open = false
        this.form.id = ''
        this.form.remark = ''
      },
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            handleProduct(this.form).then(res => {
              this.$refs["form"].validate(valid => {
                if (res.code == 200) {
                  this.$message.success("处理成功")
                  this.open = false
                  this.handleQuery()
                }
              })
            })
          }
        })
      },
      handleExport() {
        let downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })

        exportProcess( { startTime: this.queryParams.startTime,endTime: this.queryParams.endTime
        }).then(res=>{
          let filename =  `过程加工数据_${new Date().getTime()}.xlsx`
          const blob = new Blob([res])
          saveAs(blob, filename)
          downloadLoadingInstance.close()
        })

      }
    }
  };
</script>
